<template>
  <u-upload :size-type="['compressed']" :deletable="deletable" :file-list="defaultImageList" :show-progress="true"
    :max-count="maxCount" :action="action" :header="header" ref="uUpload" :auto-upload="true" @on-success="onSuccess"
    @on-remove="onRemove" @on-change="onChange"></u-upload>
</template>

<script>
export default {
  name: "yer-image-upload-bak",
  props: {
    defaultValue: "", //默认显示的字典，传字典的代码项
    defaultValueExtra: "", //默认显示的字典，传字典的代码项
    deletable: {
      type: Boolean,
      default: true,
    }, //是否展示删除按钮
    maxCount: Number,
    header: {
      type: Object,
      default: () =>{
        return {}
      }
    },
    action: {
      type: String,
      default: "",
    }, //请求地址
    fileList: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue", "input"],
  data() {
    return {
      defaultImageList: [],
      value: "", //字典展示的值，对应的是字典名称
    };
  },
  methods: {
    clear() {
      this.showValue = "";
      this.value = "";
    },
    onSuccess(data, index, lists, name) {
      // console.log("lists",lists);
      let arr = [];
      for (let i = 0; i < lists.length; i++) {
        if (lists[i].progress == 100) {
          arr.push(lists[i].response.result);
        }
      }
      this.$emit("update:modelValue", this.translateArr(arr));
      this.$emit("input", this.translateArr(arr));
      this.$emit("uploadSuccess", arr[0]);
    },
    onRemove(index, lists, name) {
      let arr = [];
      for (let i = 0; i < lists.length; i++) {
        arr.push(lists[i].response.result);
      }
      this.$emit("update:modelValue", this.translateArr(arr));
      this.$emit("input", this.translateArr(arr));
    },
    onChange(index, lists, name) {
      // console.log(index, lists, name)
    },
    translateArr(arr) {
      let str = "";
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          str += arr[i] + ",";
        }
      }
      if (str.length > 0) {
        str = str.substring(0, str.length - 1);
      }

      return str;
    },
  },
  watch: {
    value: function (newVal, oldVal) {
      this.$emit("update:modelValue", newVal);
      this.$emit("input", newVal);
    },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        // console.log('newVal',newVal); 
        const _this = this
        if (newVal && newVal!='undefined') {
          this.value = newVal;
          // 把图片变成数组格式展示
          // console.log('_this.$env.imageUrl',_this.$env.imageUrl);
          newVal.split(',').forEach(element => {
            // console.log("element",element);
            _this.defaultImageList.push({
              url: _this.$env.imageUrl+element
            })
          });
        }
      },
    }
  },
};
</script>

<style></style>
